<template>
  <!-- 根据<上下行>+<大小图标>+<车辆状态>展示不同图标 -->
  <div class="car" :style="{ 'background-image': 'url(' + `/img/${bgdImg}` + ')' }">
    <!-- 小图标不展示信息,大图标信息自定义 -->
    {{ nodeData.isSmall ? '' : nodeData.isPlateNo ? nodeData.plateNo : nodeData.numbered }}
    <span v-if="showCarsNums>1" class="number">{{ showCarsNums }}</span>
  </div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
const getNode = inject('getNode')
const node = getNode()
const nodeData = ref(node.data)
const bgdImg = ref('')
const lineHeight = ref('')
const carWidth = ref('')
const showCarsNums = ref(1)

const setImgUrl = (nodeData) => {
  let img = ''
  img = img.concat(nodeData.direction == 1 ? 'up_' : 'down_')
  img = img.concat(nodeData.isSmall ? 'small_car_' : 'big_car_')
  if (nodeData.online == 0) {
    if (nodeData.alarm == 0) {
      img = img.concat('normal.png')
    } else {
      img = img.concat('warning.png')
    }
  } else {
    img = img.concat('offline.png')
  }
  bgdImg.value = 'url(' + `/img/${img}` + ')'
  lineHeight.value = nodeData.direction == 1 ? '34px' : '24px';
  carWidth.value = !nodeData.isSmall ? '52px' : '18px';
  showCarsNums.value = typeof nodeData.repeatList != 'undefined' ? nodeData.repeatList.length : 1;
}
setImgUrl(nodeData.value)
// onMounted(()=>{
node.on('change:data', ({ current }) => {
  nodeData.value = current
  setImgUrl(nodeData.value)
})
// })
</script>

<style lang="scss" scoped>
.car {
  width: v-bind(carWidth);
  height: 28px;
  text-align: center;
  color: #FFFFFF;
  line-height: v-bind(lineHeight);
  font-size: 12px;
  background-image: v-bind(bgdImg);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  .number {
    position: absolute;
    left: 80%;
    top: -8px;
    background-color: red;
    color: #fff;
    line-height: 18px;
    width: 18px;
    border-radius: 18px;
    text-align: center;
    font-size: 12px;
  }

}

</style>